<template>
  <div>
    <div>
      <h3>1. 动态dynamic组件使用</h3>
      <Dynamic />
    </div>
    <hr>
    <div>
      <h3>2. 组件插槽使用</h3>
      <UseSlot />
    </div>
    <div>
      <h3>3. 具名插槽使用</h3>
      <UseSlot2></UseSlot2>
    </div>
    <div>
      <h3>4. 作用域插槽使用</h3>
      <p>目的: 传入标签时, 还想使用组件内的变量</p>
      <UseSlot3></UseSlot3>
    </div>
    <div>
      <h3>5. 作用域插槽-使用场景-自定义单元格</h3>
      <hr>
      <UseTable></UseTable>
    </div>
    <div>
      <h3>6. 自定义指令</h3>
      <Direct></Direct>
    </div>
     <div>
      <h3>附加练习:. 练习-注册组件</h3>
      <Practive></Practive>
    </div>
  </div>
</template>

<script>
import Dynamic from "./components/Dynamic";
import UseSlot from './components/UseSlot';
import UseSlot2 from './components/UseSlot2';
import UseSlot3 from './components/UseSlot3';
import UseTable from './components/UseTable';
import Direct from './components/Direct';

import Practive from './components/Practice';

export default {
  components: {
    Dynamic,
    UseSlot,
    UseSlot2,
    UseSlot3,
    Direct,
    Practive,
    UseTable
  }
};
</script>

<style>
</style>